<script setup lang="ts">
import { getCurrentInstance, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { get } from 'lodash-es'
import WaterFallItem from './components/WaterfallItem.vue'
import user from '@/composables/user'
import NavbarContainer from '@/components/NavbarContainer.vue'
import { getJobList } from '@/api/job'
import type { JobItemDto } from '@/api/job/type'

import Waterfall from '@/components/Waterfall/Waterfall.vue'

const jobList = ref<JobItemDto[]>([])

const waterfallRef = ref()

const pageInfo = ref({
    pageNum: 1,
    pageSize: 10,
    hasNextPage: true,
    total: 0,
})

/**
 * 获取列表数据
 *
 * @returns {Promise<void>} 无返回值
 */
async function getList() {
    const res = await getJobList({
        pageNum: pageInfo.value.pageNum,
        pageSize: pageInfo.value.pageSize,
    })
    pageInfo.value.hasNextPage = res.hasNextPage

    // 将标签和详情处理成数组
    res.list.map((item) => {
        item.jobTagList = item.jobTag ? item.jobTag.split(',') : []
        item.jobDetailList = item.jobDetail.replace(/[\r\n]/g, '「').split('「').filter(item => item)
        return item
    })

    // 处理并渲染瀑布流数据
    waterfallRef.value?.render(res.list, pageInfo.value.pageNum === 1)
}

function onItemClick(item: JobItemDto) {
    uni.navigateTo({
        url: `/package-mine/pages/job-detail/job-detail?id=${item.id}`,
    })
}

onPullDownRefresh(async () => {
    pageInfo.value.pageNum = 1
    pageInfo.value.hasNextPage = true
    await getList()
    uni.stopPullDownRefresh()
})

onReachBottom(async () => {
    if (!pageInfo.value.hasNextPage)
        return
    pageInfo.value.pageNum += 1
    await getList()
})

onShow(() => {
    const instance = getCurrentInstance()
    const scope = get(instance, 'proxy.$scope', {}) as AnyObject
    if (typeof scope.getTabBar === 'function' && scope?.getTabBar()) {
        scope.getTabBar().setData({
            selected: 0,
        })
    }
})

onMounted(async () => {
    await user.waitLogin()
    await getList()
})
</script>

<template>
    <NavbarContainer is-tab nav-color="#fff" left-text="" left-icon=""
                     background-url="https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManager363631e9-06ab-476d-890f-a9978e34dd83.png">
        <view class="box-border h-full rounded-lt-24rpx rounded-rt-24rpx bg-white px-30rpx pt-10rpx">
            <view class="mt-30rpx text-lg text-#202536 font-bold">招聘广场</view>

            <Waterfall ref="waterfallRef">
                <template #empty>
                    <view v-if="!jobList.length"
                          class="flex flex-col items-center justify-center text-center text-xs text-gray">
                        <img class="my-auto mt-230rpx h-237rpx w-282rpx"
                             :src="`../../static/images/square/no-data${user.isLogin.value ? '' : '2'}.png`" alt="">
                        <view class="mt-20rpx">暂无数据</view>
                        <view class="mt-20rpx">加入企业项目获取更多岗位信息</view>
                    </view>
                </template>
                <template #default="{ itemData }">
                    <WaterFallItem :water-full-item="itemData" @click="onItemClick(itemData)" />
                </template>
            </Waterfall>
        </view>
    </NavbarContainer>
</template>

<style scoped>
.set-bg {
    background: url('https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManager363631e9-06ab-476d-890f-a9978e34dd83.png') no-repeat;
    height: 600rpx;
}
</style>

<route lang="json">
{
    "layout": "default",
    "style": {
        "mp-alipay": {
            "transparentTitle": "always"
        },
        "enablePullDownRefresh": true
    }
}
</route>
